﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxIndex.aspx.cs" Inherits="chapter1._6Web.AjaxIndex" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;display:flex;}
        ul li{width:100px;line-height:36px;background-color:aquamarine;border:1px solid red;text-align:center;}
        img {width:306px;}
        #list{width:306px;border:1px solid #000;padding:5px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ul id="menu">
                <%--data-名字:自定义参数--%>
                <li data-num="1">汽车</li>
                <li data-num="2">狗舍</li>
                <li data-num="3">猫馆</li>
            </ul>
            <div id="list">
                <%--<img src="Images/dog1.jpg"/>--%>
            </div>
        </div>
    </form>
    <script src="jquery-3.5.1.js"></script>
    <script type="text/javascript">
        GetList(1);//默认显示第一个菜单的数据
        function GetList(num) {
            $.ajax({
                type: "post",//请求的方式
                url: "Handlers/ProductHandler.ashx",//请求的接口地址
                data: {
                    id:num
                },//需要传递的数据
                dataType: "json",
                success: function (res) {
                    //console.log(res);
                    //console.log(res[0].name);
                    var html = "";
                    for (var i = 0; i < res.length; i++) {
                        //超级字符串：esc键下面的那个点
                        html += `<img src="Images/${res[i].pic}" />`;
                    }
                    $("#list").html(html);
                },
                error: function (msg) {
                    console.log("请求错误！");
                }
            });
        }

        $("#menu li").click(function () {
            //获取li标签上绑定的自定义数据
            var num = $(this).attr("data-num");
            GetList(num);
        });
    </script>
</body>
</html>
